<template>
  <a-collapse v-model="active">
    <a-collapse-panel :key="item.key" :show-arrow="false" v-for="item in panel">
      <template slot="header">
        <div @click.stop class="customize-text" :header="item.header">
          <div class="unit" v-if="item.unit">{{ item.unit }}</div>
        </div>
      </template>
      <template slot="extra">
        <div class="customize-extra">
          {{ active.includes(item.key) ? "收起" : "展开" }}
          <div class="icon" :class="[active.includes(item.key) && 'active']">
            <bj-icon-font type="xl" color="#0068B7" :size="10"> </bj-icon-font>
          </div>
        </div>
      </template>
      <slot :name="'space_' + item.key"> </slot>
    </a-collapse-panel>
  </a-collapse>
</template>

<script>
export default {
  name: "customCollapse",
  props: {
    activeKey: {
      type: Array,
      default: () => {
        return [];
      },
    },
    panelList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  watch: {
    activeKey: {
      handler(val) {
        this.active = val;
      },
      immediate: true,
    },
    panelList: {
      handler(val) {
        this.panel = val;
      },
      immediate: true,
    },
  },
  data() {
    return {
      active: [],
      panel: [],
    };
  },
};
</script>

<style lang="less" scoped>
.unit {
  flex: 1;
  color: #999999;
}
</style>
